<template>
    <div style="width: 100%;">


        <Homeheader></Homeheader>

        <div id="moreBody">
            <div id="content">
                <div style="display: flex;justify-content:space-between;align-items: center">
                    <div style="font-size: 2vw;font-weight: bold;">更多</div>
                    <div>
                        <a-tooltip>
                            <a-button shape="circle" :icon="h(CloseOutlined)" />
                        </a-tooltip>
                    </div>
                </div>
                <div id="tabName">门店</div>
                <div id="conBigBox">
                    <div id="conBox1" @click="router.push('/store_info?type=店铺信息')">
                        <div id="iconBox">
                            <ShopOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>店铺信息</div>
                    </div>
                    <div id="conBox2" @click="router.push('/store_info?type=经营数据')">
                        <div id="iconBox">
                            <ProjectOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>经营数据</div>
                    </div>
                    <div id="conBox2" @click="router.push('/store_info?type=客户数据')">
                        <div id="iconBox">
                            <UserSwitchOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>客户数据</div>
                    </div>
                    <div v-if="addBtnFlag=='经理'" id="conBox2" @click="router.push('/store_info?type=客户数据')">
                        <div id="iconBox">
                            <UserSwitchOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>添加员工</div>
                    </div>
                </div>
                <div id='tabName'>其他</div>
                <div id="conBigBox">
                    <div id="conBox1" @click="router.push('/more_other?type=连接设备')">
                        <div id="iconBox">
                            <WifiOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>连接设备</div>
                    </div>
                    <div id="conBox2" @click="router.push('/more_other?type=通知')">
                        <div id="iconBox">
                            <BulbOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>通知</div>
                    </div>
                    <div id="conBox2" @click="router.push('/more_other?type=外观')">
                        <div id="iconBox">
                            <EyeOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>外观</div>
                    </div>
                    <div id="conBox2" @click="router.push('/more_other?type=语言')">
                        <div id="iconBox">
                            <GlobalOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>语言</div>
                    </div>
                </div>
                <div id="tabName">帮助</div>
                <div id="conBigBox" >
                    <div id="conBox1" @click="router.push('/help')">
                        <div id="iconBox">
                            <QuestionCircleOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>帮助信息</div>
                    </div>
                    <div id="conBox2" @click="router.push('/help')">
                        <div id="iconBox">
                            <CheckCircleOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>隐私政策</div>
                    </div>
                    <div id="conBox2" @click="router.push('/help')">
                        <div id="iconBox">
                            <InfoCircleOutlined id="iconStyle" />
                        </div>
                        <div id='menuText'>应用信息</div>
                    </div>
                </div>
            </div>
        </div>
        <Homefooter></Homefooter>
    </div>

</template>


<script setup lang="ts">
import { h,ref,onMounted } from 'vue';
import { CloseOutlined, ShopOutlined, ProjectOutlined, UserSwitchOutlined, WifiOutlined, BulbOutlined, EyeOutlined, GlobalOutlined, QuestionCircleOutlined, CheckCircleOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
import Homeheader from '@/views/pages/Homeheader.vue';
import Homefooter from '@/views/pages/Homefooter.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const addBtnFlag = ref()
onMounted(()=>{
    addBtnFlag.value=sessionStorage.getItem('role')
    console.log(addBtnFlag.value)
})




</script>


<style lang="less" scoped>
#moreBody {
    width: 100%;
    height: 97vh;
    background: rgba(0, 0, 0, 0.4);
    padding-top: 12vh;
    padding-bottom: 5vh;
    box-sizing: border-box;


    #content {
        width: 75%;
        margin: 0 auto;
        background: white;
        padding-top: 1%;
        padding-left: 1%;
        padding-bottom: 1%;
        padding-right: 1%;
        height: 90%;
        box-sizing: border-box;

        #conBox1 {
            width: 22%;
            height: 100%;
            border: 1px solid gray;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            padding-left: 25px;
            padding-top: 15px;
            justify-content: center; /* 水平居中 */
            // align-items: center; /* 垂直居中1 */
            box-sizing: border-box;
        }

        #conBigBox {
            display: flex;
            justify-content: left;
            width: 100%;
            height: 22%;
            overflow: hidden;
            box-sizing: border-box;
        }

        // 鼠标悬浮到conBox2时边框设置为3px
        #conBox1:hover {
            border: 3px solid blue;
        }

        #conBox2:hover {
            border: 3px solid blue;
        }

        #conBox2 {
            width: 22%;
            height: 100%;
            border: 1px solid rgb(93, 87, 87);
            border-radius: 10px;
            margin-left: 2%;
            display: flex;
            flex-direction: column;
            padding-left: 25px;
            padding-top: 15px;
            justify-content: center; /* 水平居中 */
            // align-items: center; /* 垂直居中 */
            box-sizing: border-box;
        }

        #conBox2 {
            width: 22%;
            height: 100%;
            border: 1px solid rgb(93, 87, 87);
            border-radius: 10px;
            margin-left: 2%;
            box-sizing: border-box;
            position: relative;
        }

        #iconBox {
            width: 5vw;
            height: 5vw;
            border-radius: 5px;
            background: #F0F8FF;
        }

        #menuText {
            margin-top: 10px;
            font-size: 1vw;
            font-weight: bold;
            box-sizing: border-box;
        }

        #tabName {
            font-size: 1vw;
            font-weight: bold;
            height: 7%;
            display: flex;
            align-items: center;
        }

        #iconStyle {
            color: #186BCF;
            margin-left: 1vw;
            margin-top: 1vw;
            // 居中
            font-size: 3vw;
            box-sizing: border-box;
        }
    }
}
</style>